import { Meta } from '@storybook/addon-docs';
import pkg from '@fluentui/react-components/package.json';
import { WhatsNewBoxes } from './components/WhatsNewBoxes';

<Meta title="Concepts/Introduction" />

<h1 className="fluent">
  Fluent UI React Components
  <span className="fluent-version">v{pkg.version}</span>
</h1>

<img src={require('../../public/fluentui-wide-banner.webp')} alt="An image of many user interface component designs." />

<WhatsNewBoxes
  boxes={[
    {
      image: require('../../public/lightweight.svg'),
      text: 'Lightweight components for smaller bundle size and faster performance.',
    },
    {
      image: require('../../public/tokens.svg'),
      text: 'New tokens system for frictionless cohesion across OS themes.',
    },
    {
      image: require('../../public/spring.svg'),
      text: 'New assets to level up Teams add-ins and M365 experiences.',
    },
  ]}
/>

<h3 className="fluent">Overview</h3>
<div className="fluent-text">

Fluent UI React Components is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: `@fluentui/react` and `@fluentui/react-northstar`.

Each component is designed to adhere to the following standards:

- **Customizable**: Fluent-styled components by default, but easy to integrate your own brand and theme
- **Performance**: Optimized for render performance
- **Bundle size**: Refactored and slimmed down components that allow you to include the packages and dependencies you need
- **Accessibility**: WCAG 2.1 compliant and tested by trusted testers
- **Design to Code**: Stay up to date with Fluent Design Language changes via Design Tokens

</div>

<h2 className="fluent">Questions?</h2>

Reach out to the Fluent UI React team on [Github](https://github.com/microsoft/fluentui)
